<template>
  <view class="goods_detail">
    <!-- 轮播图 -->
    <swiper class="goods_detail_swipe" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item class="goods_detail_swipe_item" v-for="(item,index) in detailList.pics" :key="index">
        <image :src="item.pics_big" mode=""></image>
      </swiper-item>

    </swiper>
    <view class="goods_detail_list">
      <view class="detail_list_price">￥{{detailList.goods_price}}</view>
      <view class="detail_list_desc">
        <view class="desc">
          {{detailList.goods_name}}
        </view>
        <block v-if="iconFlag">
          <view class="collect" @click="iconChange">
            <uni-icons type="star" size="30"></uni-icons>
            <text>收藏</text>
          </view>
        </block>
        <block v-else>
          <view class="collect" @click="iconChange">
            <uni-icons type="star-filled" color="yellow" size="30"></uni-icons>
            <text>收藏</text>
          </view>
        </block>
      </view>
      <view class="goods_detail_list_footer">快递:免运费</view>
    </view>
    <rich-text :nodes="introduce"></rich-text>
    <view class="footer">
      <view class="footer_list">
        <view class="footer_list_shop">
          <uni-icons type="shop" size="27"></uni-icons>
          <text>店铺</text>
        </view>
        <view class="footer_list_cart" @click="toCart">
          <uni-icons type="cart" size="27"></uni-icons>
          <text>购物车</text>
        </view>
        <view class="footer_list_right">
          <view class="addCart" @click="goToCart">
            <text>加入购物车</text>
          </view>
          <view class="buyNow">
            <text>立即购买</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        idQuery: {
          goods_id: '', //id
        },
        detailList: [], //存储数据
        introduce: '', //存放标签
        iconFlag:true
      };
    },
    computed: {
      ...mapState(['m_cart', ['cart']])
    },
    methods: {
      // 获取详情信息数据
      async getDetailList() {
        const result = await uni.$http.get('/api/public/v1/goods/detail', this.idQuery)
        this.detailList = result.data.message
        this.introduce = result.data.message.goods_introduce
      },
      // 去购物车
      toCart() {
        uni.switchTab({
          url: '/pages/cart/cart'
        })
      },
      // 提示加入购物车成功
      goToCart() {
        uni.showToast({
          title: '加入购物车成功',
          icon: 'none'
        })
        // 每一个的选中状态
        const stateFlag = true
        // 购物车商品的数量
        const count = 1
        const {
          goods_small_logo: logo,
          goods_price: price,
          goods_name: name,
          goods_id: id
        } = this.detailList
        const params = {
          logo,
          price,
          name,
          id,
          stateFlag,
          count
        }
        this.$store.commit('m_cart/getCartList', params);

      },
      iconChange(){
        console.log(1);
        this.iconFlag = !this.iconFlag
        if (this.iconFlag) {
          uni.showToast({
            title:'取消收藏',
            icon:'none'
          })
        }else{
          uni.showToast({
            title:'收藏成功',
            icon:'none'
          })
        }
      }
    },
    onLoad(option) {
      this.idQuery.goods_id = option.cid
      this.getDetailList()
    }
  }
</script>

<style lang="scss">
  .goods_detail_swipe {
    height: 700rpx;

    .goods_detail_swipe_item {
      width: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .goods_detail_list {

    .detail_list_price {
      color: red;
      font-size: 40rpx;
      margin-top: 40rpx;

    }

    .detail_list_desc {
      display: flex;
      justify-content: space-between;

      .desc {
        width: 80%;
        margin-top: 20rpx;
        font-size: 28rpx;
        border-right: 1px solid #A5A4A4;

      }

      .collect {
        display: flex;
        flex-direction: column;
        margin-right: 33rpx;
        font-size: 30rpx;

        uni-icons {
          margin-top: 20rpx;
        }
      }
    }

    .goods_detail_list_footer {
      font-size: 30rpx;
      color: #A5A4A4;
      margin-top: 30rpx;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;

    .footer_list {
      display: flex;
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      background: white;

      .footer_list_shop {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        margin-top: 20rpx;
        width: 110rpx;
        height: 100rpx;
        line-height: 35rpx;

        text {
          font-size: 28rpx;
          font-weight: 300;
        }
      }

      .footer_list_cart {
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;
        width: 110rpx;
        height: 100rpx;
        line-height: 35rpx;

        text {
          font-size: 28rpx;
          font-weight: 300;
        }
      }

      .footer_list_right {
        display: flex;
        width: 72%;

        .addCart {
          width: 50%;
          height: 80rpx;
          line-height: 80rpx;
          margin-top: 15rpx;
          text-align: center;
          background-color: #FF0000;
          border-radius: 50px 0px 0px 50px;
          color: white;
        }

        .buyNow {
          width: 50%;
          height: 80rpx;
          line-height: 80rpx;
          margin-top: 15rpx;
          text-align: center;
          background-color: #FFA200;
          border-radius: 0px 50px 50px 0px;
          color: white;
        }
      }
    }
  }
</style>